<template>
  <div class="page-wrapper page-h5-transaction">
    <van-tabs v-model:active="active" @change="handleTabChange">
      <van-tab name="all" title="全部"></van-tab>
      <template v-if="$route.query.pageType === 'wait'">
        <van-tab name="1" title="待审批"></van-tab>
        <van-tab name="2" title="待调度"></van-tab>
      </template>
      <template v-if="$route.query.pageType === 'mana'">
        <van-tab name="5" title="待开始"></van-tab>
        <van-tab name="6" title="进行中"></van-tab>
        <van-tab name="7" title="已完结"></van-tab>
      </template>
    </van-tabs>
    <van-list
      ref="vanListRef"
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="task-wrapper">
        <van-form v-for="(item, idx) of list" :key="idx" class="task-item">
          <van-cell-group inset>
            <div class="status">
              {{ useGetLabel('dispatchState', item.state) }}
            </div>
            <van-field
              name="switch"
              label="单号"
              @click="handleGoDetail(item.id)"
            >
              <template #input>
                <div class="title">{{ item.order_id }} ></div>
              </template>
            </van-field>
            <van-field name="switch" label="用车部门">
              <template #input>{{ item.department_name }}</template>
            </van-field>
            <van-field name="switch" label="要车人">
              <template #input>{{ item.user_name }}</template>
            </van-field>
            <van-field name="switch" label="司机">
              <template #input>{{ item.driver_name }}</template>
            </van-field>
            <van-field name="switch" label="出发地址">
              <template #input>{{ item.start }}</template>
            </van-field>
            <van-field name="switch" label="到达地址">
              <template #input>
                <div
                  v-for="(str, idx) of item.destination ||
                  item.destination_list"
                  :key="idx"
                >
                  {{ str }}
                </div>
              </template>
            </van-field>
            <van-field name="switch" label="预计出车时间">
              <template #input>{{ item.plan_begin_time }}</template>
            </van-field>
            <van-field name="switch" label="预计回车时间">
              <template #input>{{ item.plan_end_time }}</template>
            </van-field>

            <template v-if="item.state === 7">
              <van-field name="switch" label="实际出车时间">
                <template #input>{{ item.reality_begin_time }}</template>
              </van-field>
              <van-field name="switch" label="实际回车时间">
                <template #input>{{ item.reality_end_time }}</template>
              </van-field>
            </template>
            <van-field name="switch" label="调度类型">
              <template #input>{{ item.dispatch_type }}</template>
            </van-field>

            <TaskHandle
              :item="item"
              @on-handle-success="handleTabChange"
            ></TaskHandle>
          </van-cell-group>
        </van-form>
      </div>
    </van-list>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { useRouter, useRoute } from 'vue-router';
  import { apiGetDipatchTaskPage } from '@/api/dispatch';
  import useGetLabel from '@/hooks/useGetLabel';

  import TaskHandle from './TaskHandle/index.vue';

  const router = useRouter();
  const route = useRoute();
  const active = ref(route.query.type || 'all');
  const list = ref<any[]>([]);

  let pageNum = 1;
  const pageSize = 10;
  const loading = ref(false);
  const finished = ref(false);

  const vanListRef = ref();

  const onLoad = () => {
    loading.value = true;
    const params: any = {
      page_num: pageNum,
      page_size: pageSize,
    };

    if (active.value !== 'all') {
      params.state = active.value;
    }
    apiGetDipatchTaskPage(params)
      .then((res) => {
        list.value.push(...res.data.rows);
        // 加载状态结束
        loading.value = false;
        pageNum += 1;
        // 数据全部加载完成
        if (res.data.rows.length < pageSize) {
          finished.value = true;
        }
      })
      .catch(() => {
        loading.value = false;
        finished.value = true;
      });
  };

  const handleTabChange = () => {
    list.value = [];
    pageNum = 1;
    finished.value = false;
    vanListRef.value.check();
  };

  const handleGoDetail = (id: string) => {
    router.push({
      name: 'taskDetail',
      query: {
        id,
      },
    });
  };
</script>

<style lang="less" scoped>
  .task-item {
    position: relative;
    margin-top: 20px;
    width: 100%;
    .title {
      color: #999;
    }
    .btns {
      padding: 20px;
      text-align: right;
    }

    .status {
      position: absolute;
      right: 60px;
      top: 28px;
      z-index: 10;
      color: blue;
      font-size: 12px;
    }
  }
</style>
